@use '_modeSwitch.scss';

/*
* Stream head
*/

.stream-head {
    position: fixed;
    top: -300px;
    left: 0;
    width: 100%;
    height: 64px;
    transition: opacity 500ms ease-in-out, top 500ms ease-in-out, width 200ms ease-in-out;
    z-index: 13;

    &-content {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        padding: 0 24px;
        box-sizing: border-box;

        .stream-head-info {
            font: var(--text-h3);
            color: var(--secondary-white);

            .stream-duration,
            .stream-topic {
                float: left;
            }

            .stream-duration {
                margin: 0 30px 0 0;
            }

            .stream-topic {
                /* [...] */

                &.has-meeting-link {
                    cursor: pointer;
                }

                i {
                    display: block;
                    float: right;
                    margin: 6px 0 0 10px;
                    --icon-size: 16px;
                }
            }
        }

        .stream-head-pagination {
            display: flex;
            font: var(--text-h3);
            color: var(--text-color-medium);

            button {
                border: 0 none;
                cursor: pointer;
                z-index: 1;
                opacity: 0.6;
                background: transparent;
                transition: opacity 500ms ease-in-out;

                &:hover {
                    opacity: 1;
                }

                &.disabled {
                    opacity: 0.2;
                }

                i {
                    display: block;
                    margin: 0 auto;
                    --icon-size: 24px;
                    --mask-color: var(--icon-rest);
                }
            }
        }

        .stream-head-controls {
            /* [...] */

            button.head-control {
                display: block;
                float: left;
                margin: 0 0 0 20px;
                padding: 0;
                background: transparent;
                cursor: pointer;
                border: 0 none;
                font: var(--text-h3);
                color: var(--text-color-medium);

                div {
                    float: left;
                }

                i {
                    float: left;
                    margin: 0 8px 0 0;
                    --icon-size: 24px;
                    --mask-color: var(--icon-rest);
                }
            }
        }
    }
}

.in-call-info {
    top: 60px;
    left: 20px;

    .banner-copy-success {
        position: relative;
        margin: 4px auto;
        width: 70%;
        padding: 4px 30px;
        border-radius: 4px;
        font: var(--text-body1-bold);
        text-align: center;
        border: 1px solid var(--banner-border-success);
        background: var(--banner-background-success);
        color: var(--banner-text-success);
    }
}
